<template>
  <div class="EditLinkMan" ref="homePage">
    <div class="bj">
      <van-nav-bar @click-left="clickleft" style="background: #ececec;" title="增加收货地址" left-text="" left-arrow>
        <div slot="right" class="searcha">
        </div>
      </van-nav-bar>
    </div>

    <div style="width: 100%;height: 46px;"></div>
    <div class="content">
      <div class="item">
        <p class="tip_txt">姓名</p>
        <input v-model="name" type="text" placeholder="请输入姓名" />
      </div>
      <div class="item">
        <p class="tip_txt">手机号</p>
        <input v-model="phone" maxlength="11" type="text" placeholder="请输入11位数手机号" />
      </div>
      <div class="item">
        <p class="tip_txt">选择地区</p>
        <div class="province" @click="showPopup">{{province}} {{city}} {{county}}</div>
        <van-popup v-model="Listshow" round position="bottom" :style="{ height: '40%' }">
          <!-- 弹出选择城市 -->
          <van-area :area-list="areaList" :columns-num="3" @cancel="areacancel" @confirm="areaconfirm" />
        </van-popup>
      </div>
      <div class="item">
        <p class="tip_txt">详细地址</p>
        <input v-model="address" type="text" placeholder="请输入详细地址" />
      </div>
      <div class="item itemp">
        <p class="tip_txt">设为默认</p>
        <!-- <input type="text" /> -->
        <van-switch size="20px" active-color="#46d0ca" inactive-color="#fff" v-model="checked" />
      </div>
    </div>
    <div @click="AddressDo" class="btn_btn">保存</div>
  </div>
</template>

<script>
import AddressInfo from '@/assets/area.js'
import {
  UserAddressBookDo
} from '@/api/home.js'
export default {

  data () {
    return {
      clintHeigth: '', // 获取页面高度
      // type: this.$route.query.type,
      areaList: AddressInfo, // 城市数据
      Listshow: false, // 弹出选择地址
      province: '请选择地区', // 省
      city: '', // 市
      county: '', // 县
      checked: false,
      DoType: 'Add', // 操作类型
      name: '', // 姓名
      phone: '', // 手机
      address: '', // 详细地址
      moren: '' // 默认
    }
  },

  mounted () {
    this.clientHeight = `${document.documentElement.clientHeight}` // document.body.clientWidth;
    // console.log(this.clientHeight);
    // let dd = 100;
    this.$refs.homePage.style.minHeight = this.clientHeight + 'px'
    let type = this.$route.query.type
    console.log(type)
    if (type == undefined) { } else {
      this.DoType = this.$route.query.type
      this.name = this.$route.query.name
      this.phone = this.$route.query.phone
      this.province = this.$route.query.Prov
      this.city = this.$route.query.City
      this.county = this.$route.query.Dist
      this.address = this.$route.query.Address
    }
  },
  methods: {
    clickleft () {
      this.$router.back(-1)
      console.log(1)
    },
    showPopup () { // 弹出地址选择
      this.Listshow = true
    },
    areacancel () { // 取消地址选择
      this.Listshow = false
    },
    areaconfirm (val) {
      this.Listshow = false
      this.province = val[0].name
      this.city = val[1].name
      this.county = val[2].name
      // console.log(val[1].name)
    },
    AddressDo () {
      // let moren
      if (this.checked == true) {
        this.moren = 1
      } else {
        this.moren = 0
      }
      // console.log(this.moren)
      let data = {
        uabSN: this.$route.query.uabSN,
        DoType: this.DoType,
        UName: this.name,
        Mobile: this.phone,
        Prov: this.province,
        City: this.city,
        Dist: this.county,
        Address: this.address,
        IsDefault: this.moren
      }
      if (this.name == '') {
        this.$toast('请输入姓名')
      } else if (this.phone == '') {
        this.$toast('请输入手机号码')
      } else if (this.phone.length != 11) {
        this.$toast('请输入正确的手机号码')
      } else if (this.province == '') {
        this.$toast('请选择城市')
      } else if (this.address.length < 5) {
        this.$toast('请输入至少五位数的详细地址')
      } else {
        UserAddressBookDo(data).then(res => {
          // console.log(res)
          if (res.Code == 0) {
            this.$router.go(-1)
            this.$toast('保存成功')
          } else {
            this.$toast(res.Msg)
          }
        })
      }
    }
  }
}
</script>

<style lang="scss">
.EditLinkMan {
  .bj {
    .van-icon {
      color: white !important;
    }
  }

  .content {
    background: #fff;

    .item {
      height: 40px;
      display: flex;
      align-items: center;
      padding: 0 0.625rem;
      border-bottom: 0.0625rem solid #eee;
      font-size: 14px;

      .province {
        width: 12.5rem;
        height: 100%;
        display: flex;
        align-items: center;
      }

      .tip_txt {
        width: 80px;
      }

      input {
        // font: 100% tahoma, \5b8b\4f53, arial;
        // vertical-align: baseline;
        border-radius: 0;
        border: none;
        background-color: transparent;
      }
    }

    .itemp {
      justify-content: space-between;
    }
  }

  .btn_btn {
    text-align: center;
    font-size: 18px;
    height: 40px;
    line-height: 40px;
    margin: 0 0.625rem;
    margin-top: 2.5rem;
    border-radius: 1.375rem;
    color: #ffffff;
    background: #46d0ca;
  }
}
</style>
